<template>
  <div class="elementary-view">
    <div class="elementary-scroll" name="infinte" id="infinte">
      <div
        v-for="(page, idx) in pages"
        :key="idx"
        :class="['group', 'L']"
        :style="{
          top: page + 'px',
        }"
      >
        <img class="img" :src="stepBg1" alt="" />
      </div>
    </div>
    <div class="thinking" @click="getRouterThink">
      <img class="image" :src="btnResrart" alt="" />
      <span>说明</span>
    </div>
  </div>
</template>

<script>
import stepBg1 from "../../../assets/step-bg1.png";
import btnResrart from "../../../assets/btn-restart.png";
export default {
  data() {
    return {
      pageW: 0, // 滚动区域宽度
      pageH: 0, // 滚动区域高度
      bgImgsW: 0, // 滚动图片的原始宽度 （可以根据图片直接写成定值）
      bgH: null, //比例高度
      pages: [0, 0], //定义两个图片的初始位置
      startY: 0,
      scrollTotal: 0, //滚动的总距离
      btnResrart: btnResrart,
      thinkShow: false,
      stepBg1: stepBg1,
    };
  },
  mounted() {
    // let infinte = document.getElementsByName("infinte")[0];
    // 获取屏幕宽度和高度
    let infinte = document.getElementById("infinte");
    this.pageW = infinte.clientWidth;
    this.pageH = infinte.clientHeight;

    // 获取滚动图片的高度
    let bgImg = document.createElement("img");
    bgImg.setAttribute("crossOrigin", "anonymous");
    bgImg.src = stepBg1;
    bgImg.onload = () => {
      this.bgImgsW = bgImg.width;
      this.bgH = this.getRatioVal(bgImg.height); //获取图片相对比例的高度
      this.pages[1] = -1 * this.bgH;
      this.$set(this.pages, 1, -1 * this.bgH);
    };

    infinte.addEventListener("touchstart", this.touchstart, {
      passive: false,
    });
    infinte.addEventListener("touchend", this.touchend, {
      passive: false,
    });
    infinte.addEventListener("touchmove", this.touchmoveEvt, {
      passive: false,
    });
  },
  methods: {
    getRatioVal(val) {
      // 保留一位小数点
      const ratio = this.pageW / this.bgImgsW;
      return Math.ceil(val * 10 * ratio) / 10;
    },
    touchstart(evt) {
      this.startY = evt.changedTouches[0].screenY;
      evt.preventDefault();
    },
    touchend(evt) {
      let endY = evt.changedTouches[0].screenY;
      this.scrollTotal = this.scrollTotal + endY - this.startY; //总共滚动的高度
      this.startY = null;
      evt.preventDefault();
    },
    touchmoveEvt(evt) {
      let touchY = evt.changedTouches[0].screenY; //手指现在的位置
      let onceY = touchY - this.startY;
      this.updatePagePositon(onceY);
    },
    updatePagePositon(onceY) {
      let p = this.scrollTotal + onceY;
      let h = this.bgH;
      let offset = p % h; //余下了多少高度（相对滚动距离）
      let v = Math.floor(Math.abs(p) / h) % 2; //先判断滚动的数量是几个bgh，在相对位置不变的情况我们眼前应该是那个组件
      this.pages.forEach((val, i) => {
        let m = p < 0 ? -1 : 1;
        this.$set(this.pages, i, offset + (i - v) * h * (-2 * i + 1) * m);
      });
    },
    getRouterThink() {
      this.$router.push({
        name: "infiniteScroll",
        params: {
          type: "elementryText",
        },
      });
    },
  },
  beforeDestroy() { 
    let infinte = document.getElementById("infinte");
    infinte.removeEventListener("touchmove", this.touchmoveEvt);
    infinte.removeEventListener("touchstart", this.touchstart);
    infinte.removeEventListener("touchend", this.touchend);
  },
};
</script>

<style lang="scss" scoped>
.elementary-view {
  width: 100%;
  height: 100%;
  position: relative;
  .thinking {
    position: absolute;
    top: 30px;
    right: 20px;
    width: 35px;
    height: 35px;
    text-align: center;
    .image {
      width: 100%;
      height: 100%;
      vertical-align: bottom;
    }
    span {
      font-size: 12px;
      color: #fff;
    }
  }
  .elementary-scroll {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #1990fe;
    overflow: hidden;
    &.layout-h {
      box-shadow: 2px -2px 4px 0px rgba(51, 51, 51, 0.2);
    }
    .group {
      position: absolute;
      left: 0;
      width: 100%;
      .img {
        width: 100%;
      }
      &.snd-page {
        // 解决page间不吻合的问题（缝隙）
        transform: translateY(3px);
      }
    }
  }
}
</style>